<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羊了个羊2</title>
    <style>
        .scene {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .item {
            width: 25px;
            height: 25px;
            float: left;
            background-color: bisque;
            position: relative;
        }

        .card {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: aquamarine;
            z-index: 1;
            background-size: cover;
            box-shadow: 0 0 1px #ccc;
        }

        .mask {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #00000072;
        }

        .checkedbox {
            width: 350px;
            height: 50px;
            border: 1px solid black;
            margin: 50px auto;
        }

        .end {
            display: none;
            margin: 0 auto;
            width: 500px;
            height: 45px;
            line-height: 45px;
            font-size: 35px;
        }

        .title{
            width: 200px;
            height: 50px;
            border: 1px solid black;
            margin: 0 auto 10px;
            line-height: 50px;
            font-size: 35px;
            text-align: center;
            color: lightcoral;
        }
    </style>
</head>

<body>
    <div class="title"></div>
    <div class="scene"></div>
    <div class="checkedbox"></div>
    <form action="">
        <button class="end" onclick='end()'></button>
    </form>
    <script>
        class Game {
            constructor() {
                this.scene = document.querySelector('.scene');
                this.itemObj = {};
                this.cardArr = [];
                this.stage;
                this._init(1);
            }
            //初始化
            _init(stage) {
                this.stage=stage;
                this.scene.innerHTML="";
                this._createAxis();
                this._setStage();
                this._insertImg();
                this._drawMask();
                this._handleClick();
                this._showStage();
            }
            //创建坐标系
            _createAxis() {
                let fg = document.createDocumentFragment();
                for (let i = 0; i < 20; i++) {
                    for (let j = 0; j < 20; j++) {
                        let item = document.createElement("div");
                        item.classList.add("item");
                        fg.appendChild(item);
                        this.itemObj[j + "-" + i] = item;
                    }
                }
                this.scene.appendChild(fg);
            }
            //创建卡片
            _createCard(index) {
                //1.创建表示卡片的坐标系统
                let posArr = [];
                for (let i = 0; i < 20; i++) {
                    posArr.push([]);
                    for (let j = 0; j < 20; j++) {
                        posArr[i].push(0);
                    }
                }
                //2.随机将卡片坐标中的值设置为1
                for (let i = index; i < 19 - index; i++) {
                    for (let j = index; j < 9; j++) {
                        if (Math.random() < 0.2 && posArr[i][j - 1] === 0 && posArr[i - 1][j - 1] === 0 && posArr[i - 1][j] === 0 && posArr[i - 1][j + 1] === 0) {
                            posArr[i][j] = 1;
                            posArr[i][18 - j] = 1;
                        }
                    }
                }
                //3.根据设置的值创建卡片
                for (let i = 0; i < 20; i++) {
                    for (let j = 0; j < 20; j++) {
                        if (posArr[i][j] === 1) {
                            let card = document.createElement("div");
                            card.classList.add('card');
                            card.style.zIndex = 10 - index;
                            this.itemObj[j + "-" + i].appendChild(card);
                            this.cardArr.push(card);
                        }
                    }
                }

            }
            //插入图片
            _insertImg() {
                //4.删除多余卡片
                for (let i = 0; i < this.cardArr.length % 3;) {
                    let r = this.cardArr.pop();
                    r.parentNode.removeChild(r);
                }
                //5.创建图片数组
                let imgArr = [];
                let imgLength = this.cardArr.length / 3;
                for (let i = 0; i < imgLength; i++) {
                    imgArr.push(Math.floor(Math.random() * 10));
                }
                imgArr = [...imgArr, ...imgArr, ...imgArr];
                imgArr.sort(() => Math.random() - 0.5);
                for (let i = 0; i < this.cardArr.length; i++) {
                    this.cardArr[i].style.backgroundImage = `url(./imgs/${imgArr[i]}.png)`;
                    this.cardArr[i].img = imgArr[i];
                }
            }
            //6.绘制遮罩
            _drawMask() {
                let masks = document.querySelectorAll(".mask");
                masks.forEach((m) => { m.parentNode.removeChild(m) });
                for (let i = 0; i < this.cardArr.length; i++) {
                    this.cardArr[i].index = i;
                    let pos = this.cardArr[i].getBoundingClientRect();
                    let point1 = { x: pos.x, y: pos.y };
                    let point2 = { x: pos.x + 45, y: pos.y };
                    let point3 = { x: pos.x, y: pos.y + 45 };
                    let point4 = { x: pos.x + 45, y: pos.y + 45 };
                    if (this.cardArr[i] === document.elementFromPoint(point1.x, point1.y) && this.cardArr[i] === document.elementFromPoint(point2.x, point2.y) && this.cardArr[i] === document.elementFromPoint(point3.x, point3.y) && this.cardArr[i] === document.elementFromPoint(point4.x, point4.y)) {
                        continue;
                    }
                    let mask = document.createElement("div");
                    mask.classList.add('mask');
                    mask.style.zIndex = this.cardArr[i].style.zIndex;
                    this.cardArr[i].parentNode.appendChild(mask);
                }
            }
            //7.点击事件
            _handleClick() {
                let checkedList = [];
                let checkedbox = document.querySelector(".checkedbox");
                this.scene.onclick = (e) => {
                    let { target } = e;
                    if (target.className === "card") {
                        target.parentNode.removeChild(target);
                        target.style.position = "static";
                        target.style.float = "left";
                        checkedList.push(target);
                        this.cardArr.splice(target.index, 1);
                    }
                    checkedList.sort((a, b) => {
                        if (a.img > b.img) {
                            return 1;
                        } else {
                            return -1;
                        }
                    })
                    for (let i = 1; i < checkedList.length - 1; i++) {
                        if (checkedList[i].img === checkedList[i - 1].img && checkedList[i].img === checkedList[i + 1].img) {
                            checkedList.splice(i - 1, 3);
                            break;
                        }
                    }
                    checkedbox.innerHTML = "";
                    for (let i = 0; i < checkedList.length; i++) {
                        checkedbox.appendChild(checkedList[i])
                    }
                    this._drawMask();
                    if (checkedList.length >= 7) {
                        this.scene.onclick = null;
                        let fail = document.querySelector('.end');
                        fail.innerHTML = "游戏失败,点击重新开始";
                        fail.style.display = "block";
                        fail.onclick=()=>{
                            this._init(this.stage);
                        }
                    }
                    let cards = document.querySelectorAll(".card")
                    if (cards.length === 0) {
                        let success = document.querySelector('.end');
                        success.innerHTML = "游戏成功，点击进入下一关";
                        success.style.display = "block";
                        success.onclick=()=>{
                            // this.stage++;
                            this._init(2);
                        }
                    }
                }
            }
            //8.设置关卡
            _setStage(){
                if (this.stage === 1) {
                    for (let i = 5; i < 8; i++) {
                        this._createCard(i);
                    }
                } else {
                    for (let i = 1; i < 8; i++) {
                        this._createCard(i);
                    }
                }
            }
            //9.显示关卡
            _showStage(){
                let title =document.querySelector('.title');
                title.innerHTML=`第${this.stage}关`
            }
        }
        let game = new Game();
    </script>
</body>

</html>